<template>
	<div class="h-full w-full p-2 flex">
		<div class="bg-background min-w-[200px] p-2 border-box rounded-md mr-2">
			<div class="p-3 hover:bg-accent rounded-md cursor-pointer" :class="{'bg-accent text-primary':form.active==0}"
				@click="selectFn(0)">首页</div>
			<div class="p-3 hover:bg-accent rounded-md cursor-pointer" :class="{'bg-accent text-primary':form.active==1}"
				@click="selectFn(1)">自选人员</div>
			<div class="p-3 hover:bg-accent rounded-md cursor-pointer" :class="{'bg-accent text-primary':form.active==2}"
				@click="selectFn(2)">自选区域</div>
		</div>
		<div style="width: calc(100% - 200px);">
			<template v-if="form.active==0">
				<homePage></homePage>
			</template>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import homePage from './pageList/homePage/homePage.vue'
	const form = reactive({
		active: 0,
	})
	const selectFn = (index) => {
		form.active = index
	}
</script>